<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'

const elementId = ref('productionChart')

onMounted(() => {
  type EChartsOption = echarts.EChartsOption
  var chartDom = document.getElementById('productionChart')
  var myChart = echarts.init(chartDom, 'dark')
  window.addEventListener('resize', function () {
    myChart.resize()
  })
  var option: EChartsOption

  // This example requires ECharts v5.4.0 or later

  const cellSize = [56, 72]
  const pieRadius = 23

  function getVirtualData() {
    const date = +echarts.time.parse('2024-03-04')
    const end = +echarts.time.parse('2024-03-18')
    const dayTime = 3600 * 24 * 1000
    const data: [string, number][] = []
    for (let time = date; time < end; time += dayTime) {
      data.push([
        echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),
        Math.floor(Math.random() * 10000)
      ])
    }
    return data
  }

  const scatterData = getVirtualData()
  const pieSeries = scatterData.map(function (item, index) {
    return {
      type: 'pie',
      id: 'pie-' + index,
      center: item[0],
      radius: pieRadius,
      coordinateSystem: 'calendar',
      label: {
        formatter: '{c}',
        position: 'inside'
      },
      data: [
        { name: 'Work', value: Math.round(Math.random() * 24) },
        { name: 'Entertainment', value: Math.round(Math.random() * 24) },
        { name: 'Sleep', value: Math.round(Math.random() * 24) }
      ]
    } as echarts.PieSeriesOption
  })

  option = {
    grid: {},
    backgroundColor: '',
    tooltip: {},
    legend: {
      data: ['Work', 'Entertainment', 'Sleep'],
      bottom: 0,
      show: true
    },
    calendar: {
      top: 'middle',
      left: 'center',
      orient: 'vertical',
      cellSize: cellSize,
      yearLabel: {
        show: false,
        fontSize: 30
      },
      dayLabel: {
        margin: 20,
        firstDay: 1,
        nameMap: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      monthLabel: {
        show: false
      },
      range: ['2024-03-04', '2024-03-17']
    },
    series: [
      {
        id: 'label',
        type: 'scatter',
        coordinateSystem: 'calendar',
        symbolSize: 0,
        label: {
          show: true,
          formatter: function (params: any) {
            return echarts.time.format(params.value[0], '{dd}', false)
          },
          offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
          fontSize: 14
        },
        data: scatterData
      },
      ...pieSeries
    ]
  }

  option && myChart.setOption(option)
})
</script>

<template>
  <div :id="elementId" style="width: 100%; height: 100%"></div>
</template>
